<template>
  <div>
    <div class="head">
      <!-- 头像 -->
      <van-image
        round
        width="100px"
        height="100px"
        src="images/background/leaf.jpg"
      />
      <!-- 名字 -->
      <div class="name">
        <p>虚伪</p>
        <div>
          拥有积分:
          <p>458</p>
        </div>
      </div>
      <!-- 个人主页入口 -->
      <div class="myenter">
        个人主页
        <van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.head {
  display: flex;
  padding: 25px 15px;
  justify-content: space-between;
  align-content: center;
}
.name {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: center;
}
.name p {
  font-size: 25px;
  padding: 5px 5px;
}
.name div {
  display: flex;
  width: 121px;
  height: 36px;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  border-radius: 15px;
  background-color: #fcf4b1;
}
.name div p {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #ff8d1a;
}
.myenter {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  color: #a6a6a6;
}
</style>
</style>